<template>
    <div class="outlineCom">
        <div class="title">
            <span>{{ data.title || '概要' }}</span>
        </div>
        <ul class="outlineUl">
            <li
                v-for="item in data.list"
                :key="item.value"
                :style="{ height: item.type === 'slot' ? 'auto' : '32px' }"
            >
                <span class="sName" :style="{ flex: data.flex[0] }">{{ item.name }}</span>
                <template>
                    <slot
                        :style="{ flex: data.flex[1] }"
                        v-if="item.type === 'slot'"
                        :name="item.slot_name"
                        :data="item"
                    ></slot>
                    <component
                        v-else
                        @listEvent="listEvent"
                        :style="{ flex: data.flex[1] }"
                        :item="item"
                        :is="!item.type ? 'com-text' : `com-${item.type}`"
                    ></component>
                </template>
            </li>
        </ul>
    </div>
</template>

<script>
    let modules = {} //引入得组件
    const files = require.context(
        '../../../packages/components/outline/control',
        true,
        /index.vue$/
    )
    files.keys().forEach((item) => {
        const key = item.split('/')
        const name = key[1]
        const component = files(item).default
        modules[`com-${name}`] = component
    })
    export default {
        name: 'ZOutline',
        props: {
            data: {
                type: Object,
                default: () => ({}),
            },
        },
        components: {
            ...modules,
        },
        data() {
            return {}
        },
        methods: {
            listEvent(key) {
                this.$emit('listEvent', key)
            },
        },
    }
</script>

<style lang="scss" scoped>
    .outlineCom {
        width: 100%;
        height: 100%;
        background: #fff;
        padding: 0 10px;
        font-family: PingFangSC-Medium;
        .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #333;
            border-bottom: 1px solid #ddd;
        }
        .outlineUl {
            width: 100%;
            height: calc(100% - 60px);
            margin: 10px 0;
            padding: 0;
            & > li {
                width: 100%;
                height: 32px;
                line-height: 32px;
                border-bottom: 1px solid #fff;
                text-decoration: none;
                display: flex;
                //align-items: center;
                & > span {
                    display: inline-block;
                    padding: 0 10px;
                    font-size: 14px;
                }
                & > span.sName {
                    border-right: 2px solid #fff;
                    color: #333;
                    font-weight: 500;
                }
                & > span.sValue {
                    color: #666;
                    font-weight: 400;
                }
                .overflowHidden {
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
            & > li:nth-child(odd) {
                background: #f5f5f5;
            }
            & > li:nth-child(even) {
                background: #fbfbfb;
            }
        }
        .activeEvent {
            cursor: pointer;
            color: #3a8ee6 !important;
        }
    }
</style>
